/* RESPOSIVENESS */

@media screen and (max-width: 950px) {

	#mainbackground {
		width: 80%;
		left: 70px;
	}
	#maincontent {
		width: 80%;
		left: 70px;
	}
	#menu {
		width: 70px;
		overflow: visible;
	}
	.itemmenu {
		position: relative;
		/* transition */
		-webkit-transition-property: all;
		-webkit-transition-duration: .4s;
		-webkit-transition-timing: ease-out;
		-moz-transition-property: all;
		-moz-transition-duration: .4s;
		-moz-transition-timing: ease-out;
		-o-transition-property: all;
		-o-transition-duration: .4s;
		-o-transition-timing: ease-out;
		transition-property: all;
		transition-duration: .4s;
		transition-timing: ease-out;
	}
	.itemmenuname {
		font-size: 1em;
		padding: 5px;
		color: #fff;
		display:none;
		position: absolute;
		background-color: #333;
		opacity: 70%;
		top:7px;
		left:55px;
		z-index: 100;
		/* transition */
		-webkit-transition-property: all;
		-webkit-transition-duration: .4s;
		-webkit-transition-timing: ease-out;
		-moz-transition-property: all;
		-moz-transition-duration: .4s;
		-moz-transition-timing: ease-out;
		-o-transition-property: all;
		-o-transition-duration: .4s;
		-o-transition-timing: ease-out;
		transition-property: all;
		transition-duration: .4s;
		transition-timing: ease-out;
	}
	.itemmenu:hover .itemmenuname {
		display:inline;
		color: #fff;
	}
}

@media screen and (max-width: 700px) {

	.column-three {
		width:100%;
		clear: both;
		margin-bottom: 10px;
	}
	.column-three-middle {
		width:100%;
		clear: both;
		margin:0;
		margin-bottom: 10px;
	}
	
	#mainbackground {
		width: 75%;
		left: 70px;
	}
	#maincontent {
		width: 75%;
		left: 70px;
	}

}

@media screen and (max-width: 900px) {

	.column-four-half {
		width:47%;
	}
	.column-four-half.outer {
		width:100% !important;
		clear: both;
		margin-bottom: 10px;
	}

}

@media screen and (max-width: 400px) {

	#mainbackground {
		width: 75%;
		left: 50px;
	}
	#maincontent {
		width: 75%;
		left: 50px;
	}
	
	#menu {
		width: 50px;
		overflow: visible;
	}
	
	.itemmenu {
		padding: 10px;
	}
	
	.itemmenuname {
		left:40px;
	}
	
	.column-two-half {
		width:100% !important;
		clear: both;
		margin-bottom: 10px;
	}
	
	.column-four-half {
		width:100% !important;
		clear: both;
		margin-bottom: 10px;
	}
	.column-four-half.outer {
		width:100% !important;
		clear: both;
		margin-bottom: 10px;
	}

}